<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    body{
        background-color:rgb(179, 131, 43);
        background-image:linear-gradient(#e66465, #9198e5);
    }
    .first{
        height: 68px;
        background-color: aliceblue;
        background-image: linear-gradient(#9198e5,white);
    }
    .first_left{
        margin-left: 24px;
        margin-top:15px;
        margin-bottom: 15px;
        width: 38px;
        height: 38px;
        float: left;
        position: relative;
    }
    .s1{
        background:rgba(0,0,0,0.5);
        position: absolute;
    }
    .first_right{
        margin: auto;
        width: 380px;
        height: 68px;
    }
    .first_right li{
        float: left;
    }
    .two{
        height: 516px;
        width: 1209px;
        margin: 26px auto;
        background-color:rgb(129, 21, 133);
        background-image: linear-gradient(#e66465, #9198e5);
    }
    .two_1{
        width: 910px;
        height: 516px;
        float: left;
        position: relative;
    }
    .two_2{
        width: 279px;
        height: 516px;
        margin-left:20px;
        float: right;
    }
    .two_2_1{
        height: 163px;
        width: 279px;
        margin-bottom:12px;
        background-color:fuchsia;
        position: relative;
    }
    .two_2_2{
        height: 163px;
        width: 279px;
        margin-bottom:12px;
        background-color:fuchsia;
        position: relative;
    }
    .two_2_3{
        height: 163px;
        width: 279px;
        margin-bottom:12px;
        background-color:fuchsia;
        position: relative;
    }
    .three{
        height: 981px;
        width: 1209px;
        margin: 20px auto;
    }
    .t_1,.t_2,.t_3{
        font-size: 19px;
        background: rgba(0,0,0,0.5);
        position: absolute;
        left: 0px;
        bottom: 0px;
        color: white;
    }
    .t_0{
        font-size: 30px;
        background: rgba(0,0,0,0.5);
        position: absolute;
        left: 0px;
        bottom: 0px;
        padding-right: 595.5px;
        color: white;
    }
    .p1{
        width: 1209px;
        height: 80px;
        margin: auto;
        background-color: silver;
    }
    select{
        width: 100px;
        height: 50px;
        padding-left: 20px;
        padding-top: 0px;
        color: rgb(139, 72, 106);
        font-size: 19px;
        margin-top: 15px;
        margin-right: 30px;
        border-radius: 10%;
    }
    .first_right .caidan li{
        height: 50px;
        width: 50px;
        margin-right: 20px;
        border-radius: 40%;
        background-color:yellow;
        background-image: linear-gradient(white,yellow);
        font-size: 30px;
        padding-left: 5px;
    }
    .three_1,.three_2,.three_3,.three_4,.three_5,.three_6,.three_7,.three_8,.three_9{
        height: 320px;
        width: 398px;
        margin-right:5px;
        margin-bottom:5px;
        float:left;
        background-color:rgb(179, 131, 43);
        background-image:linear-gradient(#e66465, #9198e5);
        position: relative;
    }
    .three span{
        font-size: 20px;
    }
    .three p{
        font-size: 15px;
        position: absolute;
        bottom:0px;
        color: rgb(34, 27, 27);
        
    }
    .end{
        width: 1209px;
        height: 30px;
        margin: auto;
        background-color: salmon;
    }
    .end span{
        padding:480px;
        font-size: 20px;
    }
    .f1{
        width: 1209px;
        height: 100px;
        margin: auto;
    }
    .f1 li{
        float:left;
        margin-top: 200px;
    }
    .five{
        width: 1209px;
        height: 400px;
    }
</style>
</head>
<body>
    <div class="first">
        <div class="first_left">
            <img class="caidantupian" src="images/caidan.jpeg" alt="" width="38px" height="38px">
            <span class="s1"></span>
            </div>
<!-- 插入图片 -->

<div class="first_right">
<ul class="caidan">
    <li>赞</li>
    <li>萌</li>
    <li>哈</li>
    <li>艹</li>
    <li>买</li>
</ul>
</div>
</div>
<!-- 导航页面 -->
<div class="two">
    <div class="two_1">
        <img src="images/s003.jpg" alt="" width="910px" height="516px">
        <span class="t_0">Brand 100:设计成就品牌</span>
</div>
<div class="two_2">
    <div class="two_2_1">
        <img src="images/s02.jpg" alt="" width="279px" height="163px">
        <span class="t_1">想点亮圣诞气氛？试试这个训鹿灯</span>
    </div>
    <div class="two_2_2">
        <img src="images/s03.jpg" alt="" width="279px" height="163px">
        <span class="t_2">Designer 100:100个设计师，100个故事</span>
    </div>
    <div class="two_2_3">
        <img src="images/s04.jpg" alt="" width="279px" height="163px">
        <span class="t_3">旧椅子获新生。居然比以前更酷炫了</span>
    </div>
</div>
</div>
<div class="p1">
    <select name="moren" id=""> 
        <option value="最新">最新</option>
    </select>
    <select name="a1" id="">
        <option value="最热">最热</option>
    </select>
    <select name="a2" id="">
        <option value="热议">热议</option>
    </select>
    <select name="a3" id="">
        <option value="随机">随机</option>
    </select>
</div>
<div class="three">
    <div class="three_1"><img src="images/i01.jpg" alt="" width="398px" height="210px"><span>用水才能擦去笔迹，他只想保护好设计师的创意</span><p>16小时</p></div>
    <div class="three_2"><img src="images/i02.jpg" alt="" width="398px" height="210px"><span>马桶刷也要有优雅的姿态</span><p>16小时</p></div>
    <div class="three_3"><img src="images/i03.jpg" alt="" width="398px" height="210px"><span>健身也走<科技范>，你以为则会仅仅只是个瑜伽垫？</span><p>16小时</p></div>
    <div class="three_4"><img src="images/i04.jpg" alt="" width="398px" height="210px"><span>牙缝清洗怎么办？牙签压线都过时了，用<刷子>刷吧</span><p>16小时</p></div>
    <div class="three_5"><img src="images/i05.jpg" alt="" width="398px" height="210px"><span>矮怎么了？照样能够拿到书架顶端的书</span><p>16小时</p></div>
    <div class="three_6"><img src="images/i10.jpg" alt="" width="398px" height="210px"><span>废纸打造的铅笔，像是一朵朵落入凡间的花</span><p>16小时</p></div>
    <div class="three_7"><img src="images/i07.jpg" alt="" width="398px" height="210px"><span>中国国际设计节PK世界工业设计大会，哪个更棒？</span><p>16小时</p></div>
    <div class="three_8"><img src="images/i08.jpg" alt="" width="398px" height="210px"><span>首届世界工业设计大会开在家门口杭州，中国设计师们躁起来</span><p>16小时</p></div>
    <div class="three_9"><img src="images/i09.jpg" alt="" width="398px" height="210px"><span>窝在北方的暖炉里，你应该需要这样一个散热阀门？</span><p>16小时</p></div>
</div>
<div class="end">
    <span>太快了吧，慢慢来</span>
</div>
<div class="four">
    <ul class="f1">
        <li><img src="images/x01.png" alt="" width="162px" height="50px">
            <img src="images/x02.png" alt="" width="162px" height="50px">
            <img src="images/x03.png" alt="" width="162px" height="50px">
            <img src="images/x04.png" alt="" width="162px" height="50px">
            <img src="images/x05.png" alt="" width="162px" height="50px">
            <img src="images/x06.png" alt="" width="162px" height="50px">
            <img src="images/x07.png" alt="" width="162px" height="50px">
        </li>
        
    </ul>
</div>
</body>
</html>